/*
 * @Author: dfh
 * @Date: 2021-09-24 08:55:31
 * @LastEditors: dfh
 * @Modified By: dfh
 */
import React from 'react'
import { Layout } from 'antd';
import {mockData} from '../data'
import G6 from '@antv/g6';
const data={
    id: '0',
    depth: 0,
    label: '前端技能树',
    children: [
      {
        id: '0-0',
        depth: 1,
        label: 'HTML',
        data: {
          progress: 33.33,
        },
        children: [
          {
            id: '0-0-0',
            label: 'HTML5',
            depth: 2,
            data: {
              progress: 33.33,
            },
            children: [
              {
                id: '0-0-0-0',
                label: 'canvas',
                depth: 3,
                data: {
                  score: 0,
                  QRCode: 'https://',
                  testURL: 'https://'
                },
              },
              {
                id: '0-0-0-1',
                label: 'websocket',
                depth: 3,
                data: {
                  score: 0,
                  QRCode: '',
                },
              },
              {
                id: '0-0-0-2',
                label: 'web worker',
                depth: 3,
                data: {
                  score: 10,
                },
              },
            ],
          },
        ],
      },
      {
        id: '0-1',
        depth: 1,
        label: 'css',
        children: [
          {
            id: '0-1-0',
            label: 'css3',
            depth: 2,
            children: [
              {
                id: '0-1-0-0',
                label: 'flex 伸缩布局',
                depth: 3,
              },
              {
                id: '0-1-0-1',
                label: 'transform 变形',
                depth: 3,
              },
              {
                id: '0-1-0-2',
                label: 'transition 过渡',
                depth: 3,
              },
              {
                id: '0-1-0-3',
                label: 'animation 动画',
                depth: 3,
              },
            ]
          }
        ],
      },
      {
        id: '0-2',
        depth: 1,
        label: 'js',
        children: [
          {
            id: '0-2-0',
            label: 'ES6',
            depth: 2,
            children: [
              {
                id: '0-2-0-0',
                label: 'ES6',
                depth: 3,
              },
              {
                id: '0-2-0-1',
                label: '面向对象',
                depth: 3,
              },
              {
                id: '0-2-0-2',
                label: 'this',
                depth: 3,
              },
              {
                id: '0-2-0-3',
                label: '事件循环',
                depth: 3,
              },
            ],
          },
        ],
      },
      {
        id: '0-3',
        depth: 1,
        label: '流行框架',
        children: [
          {
            id: '0-3-0',
            label: 'react',
            depth: 2,
          },
          {
            id: '0-3-1',
            label: 'vue',
            depth: 2,
          },
        ],
      },
      {
        id: '0-4',
        depth: 1,
        label: '小程序',
        children: [
          {
            id: '0-4-0',
            label: '微信小程序',
            depth: 2,
          },
          {
            id: '0-4-1',
            label: '支付宝小程序',
            depth: 2,
          },
        ],
      },
    ],
  };
  
  
const { Content } = Layout;
function Index() {
    React.useEffect(() => {
        const container = document.getElementById('container');
        const width = container.scrollWidth;
        const height = container.scrollHeight || 500;
        const graph = new G6.TreeGraph({
            container: 'container',
            width,
            height,
            modes: {
                default: [
                    {
                        type: 'collapse-expand',
                        onChange: function onChange(item, collapsed) {
                            const data = item.get('model');
                            data.collapsed = collapsed;
                            return true;
                        },
                    },
                    'drag-canvas',
                    'zoom-canvas',
                ],
            },
            defaultNode: {
                size: 26,
                anchorPoints: [
                    [0, 0.5],
                    [1, 0.5],
                ],
            },
            defaultEdge: {
                type: 'cubic-horizontal',
            },
            layout: {
                type: 'mindmap',
                direction: 'H',
                getHeight: () => {
                    return 16;
                },
                getWidth: () => {
                    return 16;
                },
                getVGap: () => {
                    return 10;
                },
                getHGap: () => {
                    return 50;
                },
            },
        });

        let centerX = 0;
        graph.node(function (node) {
            if (node.id === '0') {
                centerX = node.x;
            }

            return {
                label: node.label,
                labelCfg: {
                    position:
                        node.children && node.children.length > 0
                            ? 'left'
                            : node.x > centerX
                                ? 'right'
                                : 'left',
                    offset: 5,
                },
            };
        });

        graph.data(data);
        graph.render();
        graph.fitView();

        if (typeof window !== 'undefined')
            window.onresize = () => {
                if (!graph || graph.get('destroyed')) return;
                if (!container || !container.scrollWidth || !container.scrollHeight) return;
                graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
    }, [])
    return (
        <Content >
            <div style={{height:"100%",width:'100%'}} id='container'></div>
        </Content>
    )
}

export default Index;
